<template>
  <view class="tp-hot-tag">
    <ai-icon type="icon-hot" :size="14" color="var(--brand-1)"></ai-icon>
    <text class="hot-text">{{hot}}</text>
  </view>
</template>

<script>
  export default {
    name:"tp-hot-tag",
    props: {
      hot: [String, Number]
    },
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  
  .tp-hot-tag {
    background: linear-gradient(45deg, $brand-3 50%, #fff);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 6px;
    border-radius: 20px;
    border: 1px solid var(--brand-2);
    
    .hot-text {
      color: $brand-1;
      font-size: $font-size-md;
      font-weight: $font-weight-bold;
      padding: 0 $gutter 0 $gutter * 0.5;
    }
  }

</style>